<template>
   <div class="wrapper">
        <div class="toparea_wrap">
            <p class="pyment">待付款</p>
            <p>需付款:<em id="py_money">￥551.90</em></p>
            <div class="place_box">
                <div class="pic_box">
                    <img src="/static/imgs_s04/02/s04_pic01.png" alt="">
                </div>
                <div class="info_box">
                    <div class="info_bar">
                        <span class="name_area">小明</span>
                        <a class="phone_box" href="tel:155171817268">15517187268</a>
                        <div class="alter_pic">
                            <span href="">修改</span>
                            <span>
                                <img src="/static/imgs_s04/02/s04_more.png" alt="">
                            </span>
                        </div>
                    </div>
                    <div class="add">
                        <em id="address_if_bar">河南省郑州市金水区中州大道农业路苏荷中心</em>
                    </div>
                </div>
            </div>
        </div>
        <div class="goods_box_wrap">
            <div class="goods">
                <div class="topbar-wrap">
                    <div class="pic_box">
                        <em id="logo_box"></em>
                        <!-- <img src="/static/imgs_s04/02/s04_rio.png" alt=""> -->
                    </div>
                    <h2>汇方圆</h2>
                </div>
                <div class="goods_box">
                    <div class="good">
                        <img src="/static/imgs_s04/02/s04_rio.png" alt="">
                    </div>
                    <div class="age">
                        <p class="descriptor">RIO锐澳鸡尾酒微醺(六种口味)洋酒预调酒果酒混合装275ml*6瓶</p>
                        <p class="">
                            <span class="size_number">275ml*6瓶</span>
                            <span class="letter">×1</span>
                        </p>
                        <p class="price">￥72.90</p>
                    </div>
                </div>
                <hr color="#EDEDED">
                <div class="goods_box">
                    <div class="good">
                        <img src="/static/imgs_s04/02/s04_booze.png" alt="">
                    </div>
                    <div class="age">
                        <p class="descriptor">RIO锐澳鸡尾酒微醺(六种口味)洋酒预调酒果酒混合装275ml*6瓶</p>
                        <p class="">
                            <span class="size_number">275ml*6瓶</span>
                            <span class="letter">×1</span>
                        </p>
                        <p class="price">￥72.90</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="collect_box_wrap">
            <div class="collect_box">
                <div class="collect">
                    <p>
                        <span>商品总额</span>
                        <span id="collect_money">￥551.90</span>
                    </p>
                    <p>
                        <span>运费</span>
                        <span id="freight">￥0</span>
                    </p>
                    <!-- </hr class="" color="#EDEDED"> -->
                    <p>
                        <span>需付款:</span>
                        <span id="total">￥551.90</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="order_box_wrap">
            <div class="order_box">
                <div class="order" id="order_none">
                    <p>订单信息</p>
                    <p>
                        <span class="no_fl">订单编号:</span>
                        <span class="no_fl"> 568979875668766</span>
                    </p>
                    <p>
                        <span class="no_fl">下单时间:</span>
                        <span class="no_fl">2018-06-08 18:22:06</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="footer_wrap">
            <div class="store_up">
                <span class="pic_sto">
                    <img src="/static/imgs_s04/02/s04_collect.png" alt="">
                </span>
                <br>
                <span>收藏订单</span>
            </div>
            <div class="btn_box">
                <span class="cancel_order">取消订单</span>
                <span class="py_ment">立即支付</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
     
      }
    
  },

  components: {
  },

  methods: {
  
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
navigator{
  display: inline;
}
view{
  font-size: 12px;
}
.wrapper{
  width: 100%;
  height: 100%;
  background: #eee;
}
.toparea_wrap{
    width: 100%;
    height: 169px;
    padding-top:36px;
    min-width: 375px;
    max-width: 900px;
    margin: 0 auto;
    background-color: #32B16C;
    margin: 0 auto;
    color: #fff;
    /* border: 1px solid #32B16C; */
    position: relative;
    box-sizing: border-box;
}
.pyment{
    margin: 0px 295px 15px 18px;
    font-size: 20px;
}
.pyment+p{
    margin-left: 17px;
    font-size: 13px;
}
.place_box{
    margin-left:9px;
    margin-right:11px;
    background-color: #fff;
    position: absolute;
    top: 126px;
    color: #000;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    width: 96%;
}
.place_box .pic_box{
    width: 30px;
    height: 30px;
    padding: 19px 10px 19px 13px ;
    /* display: inline-block */
    float: left;
}
.place_box .pic_box img{
    width: 30px;
    height: 30px;
}
.info_box{
    width: 85%;
    /* border: 1px solid #000; */
    float: left;
    margin-top: 10px;
}
.info_bar{
    width: 98%;
    /* border: 1px solid #000; */
    line-height: 25px;
}
.info_bar span{
    margin-right:10px;
}
.alter_pic{
    /* border: 1px solid #000; */
    /* display: inline-block; */
    /* margin-right: 20px; */
    width: 50px;
    float: right;
}
.add{
    float: left;
}
.alter_pic img{
    width: 4px;
    height: 8px;
}
.goods_box_wrap{
    width: 100%;
    margin: 0 auto;
    min-width: 375px;
    max-width: 900px;
}
.goods{
    width: 96%;
    margin-top: 34px;
    margin-left: 9px;
    margin-right: 11px;
    border-radius: 9px;
    background-color: #fff;
}
.topbar-wrap .pic_box{
    width: 18px;
    height: 18px;
    padding: 10px 6px 10px 9px;
    float: left;
}
#logo_box{
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: #eee;
}
.topbar-wrap h2{
    line-height: 39px;
    font-size: 12px;
    color: #303030;
}
.goods_box{
    height: 91px;
    padding-bottom: 11px;
    /* border-bottom: 2px solid #EDEDED; */
}
.good{
    width: 91px;
    height: 91px;
    float: left;
    padding-left:5px ;
}
.good img{
    width: 91px;
    height: 91px;
}
.age{
    float: right;
}
.age p:nth-child(2){
    line-height: 45px;
}
.age p:nth-child(3),p:nth-child(2)>span:nth-child(2){
    float: right;
    margin-right: 5px;
}
.descriptor{
    width:250px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
hr{
    width: 90%;
    color: #EDEDED;
    font-size: 1px;
}
.collect_box_wrap{
    width: 100%;
    margin: 0 auto;
    min-width: 375px;
    max-width: 900px;
}
.collect_box{
    width: 96%;
    margin-top: 34px;
    margin-left: 9px;
    margin-right: 11px;
    border-radius: 9px;
    background-color: #fff;
}
.collect{
    /* height: 121px; */
    width: 98%;
    margin: 0 auto;
}
.collect p{
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #666666;
}
.collect p:nth-child(2){
    border-bottom: 1px solid #EDEDED;
}
.collect p:nth-child(3) span{
    color: #262626;
}
.collect p:nth-child(3) #total{
    font-size: 15px;
    color: #F75458;
    float: right;
}
.order_box_wrap{
    width: 100%;
    margin: 0 auto;
    min-width: 375px;
    max-width: 900px;
    margin-bottom: 100px;
}
.order_box{
    width: 96%;
    margin-top: 10px;
    margin-left: 9px;
    margin-right: 11px;
    border-radius: 9px;
    background-color: #fff;
}
.order{
    /* height: 102px; */
    width: 98%;
    margin: 0 auto;
}
.order p{
    height: 33px;
    line-height: 33px;
}
#order_none .age_foods{
    color: #333333;
    font-weight: 600;
}
#order_none p .no_fl{
    float: none;
}

.footer_wrap{
    width: 100%;
    margin: 0 auto;
    min-width: 375px;
    max-width: 900px;
    background-color: #fff;
    margin-top: 10px;
    height: 50px;
    position: fixed;
    bottom: 0;
}
.store_up{
    float: left;
    padding-left: 18px;
    width: 40px;
    font-size: 9px;
    text-align: center;
    margin-top: 8px;
    color: #A3A5A8;
}
.pic_sto , .pic_sto img{
    width: 18px;
    height: 18px;
}
.btn_box{
    float: right;
    margin-right: 10px;
    margin-top: 15px;
}
.btn_box span{
    padding: 7px 11px;
    border-radius: 14px;
    margin-left: 10px;
    font-size: 12px;
    font-family: "SourceHanSansCN-Regular";
}
.btn_box .cancel_order{
    background-color: #fff;
    border: 1px solid #8E8E8E;
}
.btn_box .py_ment{
    background-color: #32B16C;
    border: 1px solid #32B16C;
    color: #fff;
}

</style>
